<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 1. 引入 babel   将 JSX 的语法转为 JS 语法-->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- 2. script 标签设置类型为 text/babel -->
    <script type="text/babel">
        // 3. 创建虚拟 DOM 对象   JSX 语法
        // let vdom = <h1 title="JSX初体验">Hello React</h1>;
        let vdom = <div title="shiju" a="100">
            <h2>雨霖铃·寒蝉凄切</h2>
            <p>多情自古伤离别，更那堪冷落清秋节</p>
          </div>

        //4. 将虚拟 DOM 转为真实 DOM 插入到容器中
        ReactDOM.render(vdom, document.querySelector('#root'));

        // document.getElementById  getElementById
    </script>
  </body>
</html>
